<template>
  <div class="goods-box">
    <div class="goods-left">
      <p>{{goods_name}}</p>
      <div class="goods-introduce">
        <img :src="'https://a2.ngrok.kjjvip.com'+simg" alt="">
      
        <div class="goods-intro-right">
          <ul>
            <li>
              <span></span><span></span><span></span>
              <span></span>
            </li>
            <li><span>区域：</span><span>保密</span></li>
            <li>
              <span>真实个人</span><span>担保交易</span><span>支持全国</span
              ><span>在线沟通</span>
            </li>
            <li>
              <span @click="toBuy" >我想要</span>

              </li>
            <li>
              <el-button icon="el-icon-star-off" @click="isred = true" :class="{'active': isred}">收藏</el-button>

            </li>
          </ul>
        </div>
      </div>
      <h3>宝贝描述</h3>
      <div class="goods-saycon">
        <img src="~assets/img/dlogo.png" alt="" /><span>{{seller}}</span>
        <span>有话说</span>
        <div class="goods-saycon-content">{{goods_describe}}</div>
      </div>
      <div class="goods-img-list">
          <img :src="item" alt="" v-for="item in info_url" :key="item">
          <img src="http://tres.myyihuo.com/Content/Upload/Image/Informt_Details/20180205/0/07bbc5f97aec49f686d18d7f0bee2131.png" alt="">
      </div>
    </div>
    <div class="goods-right">
      <div class="goods-right-one">
        <div class="goods-right-tile">
          <img src="~assets/img/dlogo.png" alt="" />
        </div>
        <span class="jy-show">Y优货源</span>
        <div class="goods-right-content">
          <span>他的交易</span>
          <el-link type="warning" :underline="false"
            >查看详细信息<i class="el-icon-view el-icon--right"></i
          ></el-link>
        </div>
     
      </div>
     
    </div>
  </div>
</template>

<script>
import { reparnew } from "network/request.js";
export default {
  data() {
    return {
      isred:false,
      goods_id: this.$route.query.gid,
      goods_describe:this.$route.query.desc,
      goods_name:this.$route.query.title,
      seller:this.$route.query.sname,
      sid:this.$route.query.sid,
      simg:this.$route.query.simg,
      info_url:[],
      
     
    };
  },
  computed: {
    
  },
  mounted() {
  },
  created() {
    console.log(this.goods_id);
  },
  methods: {
    async toBuy(){
             const {data:res} = await reparnew({
               to_user_id:this.sid,
               content:'我想要这个商品，给个联系方式吧',
               type:1,
                business_id:this.goods_id
             })
             console.log(res);
             if(res.status == 0) {
               this.$message.success('已向卖家发送意向请求！请静等回复！！')
             }
    },
    
  },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #ffa559;
}
.goods-box {
  padding-top: 100px;
  width: 80%;
  margin: 0 auto;
  display: flex;
  .goods-left {
    flex: 3;
    h3 {
      border-left: 4px solid #ffa559;
    }
    p {
      font-size: 20px;
      padding: 10px 0px;
    }

    .brower {
      color: #aaa;
    }

    .goods-saycon {
      img {
        border-radius: 60px;
        width: 60px;
      }
      span {
        font-weight: bold;
      }
      .goods-saycon-content {
        margin: 20px;
        padding: 20px;
        width: 90%;
        height: 100px;
        background-color: #eee;
      }
    }
    .goods-img-list {
      // width: 80%;
      img {
        width: 100%;
      }
    }
    .goods-introduce {
      flex: 1;
      display: flex;
     img {
       width: 200px;
     }

      .goods-intro-right {
        padding: 0px 20px;
        flex: 1;
        ul {
          list-style: none;
          li {
            padding: 15px 0px;
            span {
              margin: 0px 5px;
              padding: 0px 10px;
              
            }
          }
          li:nth-child(1) span:nth-child(2) {
            color: #ffa559;
            font-size: 18px;
          }
          li:nth-child(1) span:nth-child(4) {
            color: #aaa;
            text-decoration: line-through;
          }
          li:nth-child(3) span {
            color: #ffa559;
            border: 1px solid #ffa559;
            border-radius: 3px;
          }
          li:nth-child(4) span:nth-child(1) {
            padding: 10px 20px;
            background-color: #ffa559;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
          }
          li:nth-child(4) span:nth-child(2) {
            padding: 10px 20px;
            color: #ffa559;
            border: 1px solid #ffa559;
            border-radius: 3px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .goods-right {
    flex: 1;
    .goods-right-one {
      text-align: center;
      background-color: #eee;
      height: 300px;
      .goods-right-tile {
        padding: 20px;
        img {
          width: 60px;
        }
      }

      .jy-show {
        padding: 10px 0px;
        font-size: 10px;
      }

      .goods-right-content {
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
        span {
          border-left: 3px solid #ffa559;
          padding: 0px 10px;
          font-size: 18px;
          font-weight: bold;
        }
      }

      .goods-right-bottom {
        padding-top: 40px;
        display: flex;
        justify-content: space-around;
        .right-botm-one {
          display: flex;
          flex-direction: column;
          span {
            font-size: 24px;
            color: #aaa;
          }
        }
      }
    }
    .goods-right-two {
      margin-top: 20px;
      background-color: #eee;
      h3 {
        border-left: 4px solid #ffa559;
      }

      .goods-right-item {
        padding: 10px 0px;
        border-top: 1px solid #fff;
        width: 100%;
        display: flex;
        justify-content: center;
        img {
          width: 30%;
        }

        .goods-right-item-info {
          margin-left: 20px;

          span:nth-child(2) {
            font-size: 22px;
            color: #ffa559;
          }
        }
      }
    }
  }
}
</style>